<template>
  <el-main>
    <!-- 添加商品 -->
    <div class="controll">
      <p class="title">商品管理</p>
      <el-button type="primary" style="background:#337AB7" @click="add">
        <i class="el-icon-plus" style="font-weight:blod"></i>添加商品
      </el-button>
    </div>
    <!-- 搜索 -->
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item>
        <el-select v-model="searchType" placeholder="查询条件">
          <el-option label="按商品id查询" value="ID" aria-selected></el-option>
          <el-option label="按商品名称查询" value="Name"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-input v-model="searchName" placeholder="关键字"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" style="background:#337AB7" @click="search()">查询</el-button>
      </el-form-item>
    </el-form>
     
    <!-- 表格信息 -->
    <el-table :data="shopList" style="width: 100%">
      <el-table-column prop="id" label="id" width="180"></el-table-column>
      <el-table-column prop="name" label="信息" width="180"></el-table-column>
      <el-table-column prop="price" label="价格"></el-table-column>
      <el-table-column prop="status" label="状态">
        <template slot-scope="scope" column-key>
          <!-- 上/下架 -->
          <p>{{scope.row.status==2?'已下架':'在售' }}</p>
          <el-button
            size="mini"
            type="warning"
            style="float:right"
            @click="handleDelete(scope.$index,scope.row)"
          >{{scope.row.status==1?'下架':'上架' }}</el-button>
        </template>
      </el-table-column>
      <!-- 操作 查看/编辑 -->
      <el-table-column label="操作">
        <template slot-scope="scope">
          <router-link :to="'/shopdetail/'+scope.row.id" style="text-decoration:none">查看</router-link>
          <router-link :to="'/shopupdate/'+scope.row.id" style="text-decoration:none">编辑</router-link>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <!-- <el-pagination
      @current-change="change(page)"
      :current-page.async="page"
      :page-size="pageSize"
      prev-text="上一页"
      next-text="下一页"
      background
      layout="prev, pager, next, jumper"
      :total="this.total"
    ></el-pagination> -->

    <el-pagination
    background
    :total="total"
    :page-size="pageSize"
    @current-change="handleCurrentChange"
    @size-change="handleSizeChange"
  ></el-pagination>
    
  </el-main>
</template>

<script>
import {
  shopList,
  shopListPagination,
  shopListSearch,
  shopSale
} from "@/request/http";
export default {
  name: "ShopManage",
  data() {
    return {
      searchType: "", //查询条件
      searchName: "", //关键字查询
      shopList: [], //获取到数据
      that: this,
      //分页器
      pageSize: 10, //每页多少条
      flag: false,
      type: '',
      total:0,
      currpage:1
    };
  },

  mounted() {
    //商品管理列表内容数据渲染
    this.openMethod();
    //用户总数传给分页器的total
    // this.total=this.$store.this.state.Counts.productCount
  },
  methods: {
    //商品列表内容获取，
    async openMethod() {
      const res = await shopList({ pageNum: this.page });
      console.log(res)
      this.shopList = res.data.data.list;
      this.total = res.data.data.total;
    },

       //分页
       async handleCurrentChange(page) {
      //this.currpage指的是当前的页数
      if (!this.flag) {
        const res = await shopListPagination({ pageNum: page });
        this.shopList = res.data.data.list;
      } else {
        const res = await shopSearchPagination({
          listType: "search",
          pageNum: cpage,
          [this.type]: this.searchName
        });
        this.shopList = res.data.data.list;
      }
      //   this.currpage = cpage;
      //   this.shippage();
    },
    handleSizeChange(val) {
      this.pageSize = val;
    },

    // 搜索查询
    async search() {
      console.log(this.searchType, this.searchName);
      //判断是id还是name
      if (this.searchType == "ID") {
        this.type= 'productId'
      } else {
        this.type= 'productName';
      //   console.log(this.type,'23')
      }
                                      // shopListSearch({
                                        
                                      //   [this.type]:this.searchName}
                                      //   ).then(res=>console.log(res))

      //实时搜索
      if (this.searchName == "") {
        //搜索为空
        this.flag =false;
        const res = await shopList({ pageNum:this.currpage  });
        this.shopList = res.data.data.list;
      } else {
        this.flag = true;
        const res = await shopListPagination({
          searchType: "search",
          pageNum: 1,
          [this.type]: this.searchName
        });
        this.shopList = res.data.data.list;
        this.total = res.data.data.total;
      }
    },

      
    //上下架
    async handleDelete(index, row) {
      var open = "";
      if (row.status == 1) {
        open = "下架";
      } else {
        open = "上架";
      }
      //弹出框
      this.$confirm("确定要" + open + "该商品?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        //点击确定后触发
        .then(async () => {
          var status = 0;
          if (row.status == 1) {
            status = 2;
          } else {
            status = 1;
          }
          const res = await shopSale({ productId: row.id, status: status });
          if (res.data.data.status == 0) {
            this.openMethod();
          }
        })
        ////点击取消后触发
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消操作"
          });
        });
    },
    add() {
      this.$router.push("/shopadd");
    },
  },
   filters:{
        types(val){
            console.log(val)
            return val == 1? "在售":"已下架"
        } ,
         types2(val){
            return val == 2? "上架":"下架"
        }
    }
};
</script>

<style>
</style>